<template>
  <div class="collegeBank">
    <header>
      <div class="container">
        <div class="search">
          <el-input
            placeholder="输入关键词或大学名称"
            v-model="searchText"
            id="searchInput"
            @focus="searchBtnFocus"
            @blur="searchBtnBlur"></el-input>
          <el-button type="primary">搜索</el-button>
        </div>
        <div
          :style="recommendSize"
          class="recommend"
          @mouseover="recommendShow"
          @mouseout="recommendHide">
          <p>不知道选什么？看看下面的职业</p>
          <p>
            <span
              @click="searchMajor(item)"
              v-for="(item,index) in recommendList"
              :key="index">
              {{item}}
            </span>
          </p>
        </div>
      </div>
    </header>
    <main></main>
  </div>
</template>

<script>
    export default {
        name: "collegeBank",
        data() {
            return {
                searchText: '',
                isRecommendShow: false,
                recommendSize: {
                    width: '0',
                    height: '0',
                },
                recommendList: ['山东大学','北京大学','清华大学','武汉大学','济宁学院','滨州医学院'],
            }
        },
        created() {

        },
        mounted() {

        },
        methods: {
            // 获取焦点显示
            searchBtnFocus() {
                this.recommendSize = {width: '50%', height: '120px'};
            },
            // 失去焦点隐藏
            searchBtnBlur() {
                if(!this.isRecommendShow) {
                    this.recommendSize = {width: '0', height: '0'};
                }
            },
            // 鼠标移上显示推荐
            recommendShow() {
                this.recommendSize = {width: '50%', height: '120px'};
                this.isRecommendShow = true;
            },
            // 鼠标移出隐藏推荐
            recommendHide() {
                this.isRecommendShow = false;
            },
            // 查询专业
            searchMajor(major) {
                // 先获取焦点，再添加搜索专业
                const searchInput = document.getElementById('searchInput');
                searchInput.focus();
                this.searchText = major;
            }
        }
    }
</script>

<style scoped lang="scss">
  // header
  header{
    .container{
      position: relative;
      height: 300px;
      .search{
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
        padding: 20px 0;
        .el-input{
          width: 50%;
          margin-right: 10px;
        }
      }
      .recommend{
        position: absolute;
        top: 65px;
        left: 0;
        background-color: #f5f5f5;
        border-radius: 8px;
        box-shadow: 1px 1px 4px #f2f2f2;
        transition: all 0.2s;
        overflow: hidden;
        p{
          padding: 10px 20px;
        }
        span{
          color: #409EFF;
          cursor: pointer;
          margin: 0 4px;
        }
        span:hover{
          color: #0982FF;
        }
      }
    }
  }
</style>